<!--
 * @Author: 刘翔
 * @Date: 2025-07-31 14:08:54
 * @LastEditTime: 2025-09-02 17:01:26
 * @LastEditors: your name
 * @Description:页面组合15(高倍率病例结余情况)
 * @FilePath: \建达文件\ts-demo\ts-demo\src\pptHome\pageList\pageType15.vue
-->
<template>
  <div class="page-type-15">
    <div class="page-type-15-header">
      <div class="page-type-15-header-item" v-for="item in cardData" :key="item.key">
        <div :style="{ fontWeight: '600', color: desc[item.key] > 0 ? '#333' : '#ee6666' }">{{ desc[item.key] }}</div>
        <div>{{ item.text }}</div>
      </div>
    </div>
    <div class="page-type-15-content">
      <BarChart v-if="getChartProps1()" ref="chart1" v-bind="getChartProps1()" />
    </div>
    <div class="page-type-15-footer">
      <DataTable ref="table1" v-bind="getTableProps1()" />
    </div>
  </div>
</template>

<script>
import BarChart from '../components/BarChart.vue';
import DataTable from '../components/DataTable.vue';
export default {
  name: 'pageType15',
  components: {
    BarChart,
    DataTable,
  },
  props: {
    //图表配置
    chartList1: {
      type: Object,
      default: () => {},
    },
    //卡片数据
    cardData: {
      type: Array,
      default: () => [],
    },
    desc: {
      type: Object,
      default: () => {},
    },
    tableData1: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    getTableProps1() {
      return {
        tableData: this.tableData1.data,
        columns: this.tableData1.columns,
        tableParams: {
          headerHeight: 60,
        },
        pptOptions: {
          x: 0.5, // X轴位置
          y: 2.4, // Y轴位置
          h: 3, // 高度
          title: {
            // 标题配置
            x: 0.5,
            y: 0.5,
            fontSize: 24,
            color: '363636',
            bold: true,
          },
          table: {
            // 表格配置
            colW: this.tableData1.columns.map(item => this.pptWidthPercentFn(item.widthPercent)),
            // 表格内容配置
            content: {
              fontSize: 8,
              color: '000000',
              bold: true,
            },
            // 表格标题配置
            title: {
              fontSize: 8,
              color: 'ffffff',
            },
            // 表格边框样式
            borderStyle: {
              color: '000000',
            },
            // 表格垂直对齐方式(middle, top, bottom)
            valign: 'middle',
            // 表格水平对齐方式(left, center, right)
            align: 'center',
            // 自动分页
            autoPage: false,
            // 自动分页标题是否显示
            autoPageRepeatHeader: false,
            // 自动分页标题行数
            autoPageHeaderRows: 1,
          },
        },
      };
    },
    // 计算ppt宽度百分比(9是ppt目前总宽度)
    pptWidthPercentFn(pptWidthPercent) {
      return (pptWidthPercent / 100) * 9;
    },
    getChartProps1() {
      return {
        title: '总结余(万元)',
        categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
        values: this.chartList1.data.map(item => item[this.chartList1.keyList[0]]),
        seriesName: this.chartList1.keyList[0],
        color: this.chartList1.colors[0],
        chartConfig: {
          height: 500,
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: `{b}: {c}${this.chartList1.unitList[0]}`,
          },
          legend: {
            show: false,
            itemStyle: {
              color: `${this.chartList1.data.map(item => item[this.chartList1.keyList[0]]).every(item => item < 0) ? this.chartList1.colors[0] : '#ee6666'}`,
            },
          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '5%',
            containLabel: true,
          },
          xAxis: {
            axisLabel: {
              fontSize: 18,
            },
          },
          yAxis: {
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '40%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              formatter: `{c}${this.chartList1.unitList[0]}`,
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 0.5,
            y: 0.7,
            w: 9,
            h: 1.5,
          },
          // 标题配置
          title: {
            x: 4.8,
            y: 2.2,
            fontSize: 8,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: false,
            legendPos: 'b',
            showTitle: false,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            //显示值
            showValue: true,
            dataLabelPosition: 'outEnd',
            dataLabelFormatCode: `[${this.chartList1.data.map(item => item[this.chartList1.keyList[0]]).every(item => item < 0) ? '红色' : '黑色'}],##0.00${this.chartList1.unitList[0]}`,
          },
        },
      };
    },
    /**
     * 导出为PPT
     * @description 将页面中的所有图表导出到PPT
     * @param {Object} pptx pptxgen实例
     * @param {Object} slide 当前幻灯片实例
     */
    exportToPPT(pptx, slide) {
      this.$refs.chart1.exportToPPT(pptx, slide);
      this.$refs.table1.exportToPPT(pptx, slide);
      this.cardData.forEach(item => {
        slide.addText(
          [
            {
              text: `${this.desc[item.key]}`,
              options: {
                fontSize: 16,
                color: this.desc[item.key] > 0 ? '333333' : 'ee6666',
                bold: true,
                breakLine: true,
                align: 'center',
              },
            },
            {
              text: `${item.text}`,
              options: {
                fontSize: 16,
                color: '363636',
                align: 'center',
              },
            },
          ],
          {
            x: item.x,
            y: item.y,
            w: 3,
          }
        );
      });
    },
  },
};
</script>

<style scoped lang="less">
.page-type-15 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .page-type-15-header {
    position: absolute;
    top: 0px;
    right: 100px;
    display: flex;
    justify-content: space-around;
    font-size: 2rem;
    width: 60%;
    .page-type-15-header-item {
      text-align: center;
    }
  }
  .page-type-15-content {
  }
  .page-type-15-footer {
    flex: 1;
  }
}
</style>
